<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else>
		<x-scroll :fixed="true" :isNav="false" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
			<view class="list wap"  v-if="Array.isArray(list) && list.length > 0">
				<view class="item" v-for="item in list" :key="item.ID">
					<view class="cover"  @click="nav_to(`/pages/user/user_visitor?id=${item.SaleID}`)">
						<image  :src="item.HeadImgUrl" mode="" />
					</view>
					<view class="main">
						<view class="name f1 c1">{{item.Name}}</view>
						<view class="info f2 c3">{{getTime(item.CreateTime)}}</view>
					</view>
					<view class="right">
						<text class="f1 c3 csed">{{item.Commission}}</text>
						<view class="f3 c3 time">{{item.Product}}</view>
					</view>
				</view>
			</view>
			<block v-else>
				<u-empty mode="list" width="64" height="64"
					icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
					iconSize="32" text="暂无数据"></u-empty>
			</block>
		</x-scroll>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				user: [],
				list: [],
				price: '',
				title: '',
				type: '',
				
				isLook: false,
				isMore:false,
				load: false,
				_freshing: true,
				PageIndex: 1, //页码
				PageSize: 15, //请求条数
			}
		},
		onLoad(e) {
			if (e.t == 1) {
				this.type = '礼物收入';
			} else {
				this.type = '邀请收入';
				uni.setNavigationBarTitle({
				title: '邀请明细'
			});
			}
			
			this.init();
		},
		onShow() {
			
		},
		computed: {
		},
		methods: {
			clearRepetition(arr, key = "ID") {
				let newArr = [];
				arr.forEach(item => {
					let index;
					let check = newArr.every((newItem, i) => {
						if (item[key] !== newItem[key]) {
							index = -1;
							return true;
						} else {
							index = i;
			
							return false;
						}
					})
					if (check) {
						newArr.push(item);
					} else {
						newArr.splice(index, 1, item);
					}
			
				})
				return newArr;
			},
			onRefresh() {
				this.PageIndex = 1;
				this.init();
			},
			//滚动到底部触发
			async scrolltolower() {
				if (this.isMore) {
					this.PageIndex++;
					this.init();
				}
			},
			async init() {
				this.user = uni.getStorageSync('user');

				let res = await this.$api.post('SaleChannel/UserCommissionV2', {
					UserID: this.user.UserID,
					CommissionType: this.type,
					PageIndex: this.PageIndex,
					PageSize: this.PageSize
				});

				let list1 = this.list.concat(res.data)
				
				this.list = this.clearRepetition(list1, "ID");			
				
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
				this.load = true;
			}

		}
	}
</script>

<style lang="scss">
	
		.list {
			.item {
				display: flex;
				height: 140rpx;
				align-items: center;
	
				.cover {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					position: relative;
	
					image {
	
						height: 100%;
						width: 100%;
					}
				}
	
				.main {
					padding-left: 10rpx;
					flex: 1;
	
					.name {}
				}
				
				.right{
					text-align: right;
				}
	
				.btn_sm {
					line-height: 50rpx;
					height: 50rpx;
					margin-top: 10rpx;
					width: 140rpx;
					border-radius: 10rpx;
					background: #606060;
					color: #fff;
				}
			}
		}
	
		.islook {
			.item {
				.cover {
					image {
						filter: blur(7px);
						height: 100%;
						width: 100%;
					}
				}
	
				.main {
					.name {
						filter: blur(4px);
					}
				}
			}
		}
</style>